<template>
	<div class="p_Login_zhuce">
		<div class="p_Login_Return">
			<a href="javascript:history.back(-1)"><img src="../../assets/login/返回.png" /></a>
			<span>注册</span>
		</div>
		<span class="p_Login_input1">
       		<input type="text" placeholder="请输入手机号" v-model="arr" @keyup="phone"/>
      </span>
		<div class="p_xuanze">
			<p>
				<input type="checkbox" class="bg1111" @click='judge' :disabled="xx"/>
				我已阅读并同意以下协议，
				<a href="#">接受免除或限制责任、诉讼管辖约定等条款</a>，愿意同步创建账户。 
			</p>
		</div>
		<div class="p_Login_xieyi">
			<a href="#">《国美平台服务协议》</a>
			<a href="#">《国美平台隐私政策》</a>
			<a href="#">《美付宝服务协议》</a>
		</div>
		<a id="yanzhengma" :href="mm?'': href+arr">
			<button class="huakuai" @click="getyanzheng" :disabled="mm">获取验证码</button>
		</a>
	</div>

</template>

<script>
	export default {
		name: "zhanghao",
		data() {
			return {
				arr: "",
				href: "#/yanzheng/",
				bg1111:true,
				mm:true,
				xx:true

			}
		},
		methods:{
			phone:function(){
				var arr1 = /^((1[3,5,8][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/;
				if(arr1.test(this.arr)) {
					this.xx = false;
				} else {
						this.xx = true;
				};
				if(arr1.test(this.arr)){
					this.xx = false;					
				}else{
					this.xx = true;	
				}
			},
			getyanzheng:function(){
				var bol = $('.bg1111').is(':checked');
			},
			judge:function(){
				var bol = $('.bg1111').is(':checked');				
			  	if(bol ){			  		
			  		this.mm = false;
			  	}else{
			  		this.mm = true;
			  	}

			}
		}
	}
</script>

<style scoped>
	.p_Login_zhuce {
		width: 100%;
	}
	
	.p_Login_Return img {
		width: 10%;
		margin: 2%;
	}
	
	.p_Login_Return span {
		display: inline-block;
		margin-left: 7rem;
		width: 20%;
		vertical-align: 1rem;
		font-size: 2rem;
	}
	
	.p_Login_input1 input {
		margin-left: 3rem;
		border: none;
		outline: none;
		width: 92%;
		height: 2rem;
		color: #999;
		font-size: 1.5rem;
	}
	
	.p_Login_input1 {
		margin: 10% auto;
		width: 80%;
		display: block;
		padding-bottom: 3%;
		border-bottom: 1px solid #999;
		background: url(../../assets/login/手机.png)no-repeat;
		background-size: 1.8rem 1.8rem;
	}
	
	.drag {
		width: 40rem;
		height: 4rem;
		line-height: 4rem;
		background-color: #e8e8e8;
		position: relative;
		margin: 0 auto;
	}
	
	.bg {
		width: 4rem;
		height: 100%;
		position: absolute;
		background-color: #75CDF9;
	}
	
	.text {
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: center;
		user-select: none;
	}
	
	.btn {
		width: 4rem;
		height: 3.8rem;
		position: absolute;
		border: 1px solid #ccc;
		cursor: move;
		font-family: "宋体";
		text-align: center;
		background-color: #fff;
		user-select: none;
		color: #666;
	}
	
	#yanzhengma {
		display: block;
		width: 80%;
		height: 6rem;
		margin: 5% auto;
	}
	
	.huakuai {
		width: 100%;
		height: 100%;
		background-color: rgb(255, 129, 173);
		border-radius: 2rem;
		border: none;
		outline: none;
		font-size: 1.5rem;
		color: white;
	}
	
	.p_xuanze {
		width: 80%;
		margin: 5% auto;
		color: #999;
	}
	
	.p_xuanze a {
		color: #999;
	}
	
	.p_xuanze input {
		vertical-align: bottom;
	}
	
	.p_Login_xieyi {
		width: 80%;
		margin: auto;
	}
	
	.p_Login_xieyi a {
		text-decoration: none;
		font-size: 0.65rem;
		margin: 1%;
		color: rgb(110, 190, 231);
	}
	
	.p_Login_number {
		width: 80%;
		height: 3rem;
		margin: 5% auto;
		line-height: 3rem;
		display: block;
	}
</style>